<template>
    <div class="comment-container">
        <!-- // 评论子组件 -->

        <div class="publishbox">
            <h3>发表评论</h3>
            <textarea v-model="userinput" placeholder="说两句吧...."></textarea>
            <mt-button type="primary" size="large" @click="postComment" :disabled="is_disabled">发表评论</mt-button>
        </div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="(item,i) in templist" :key="i">
                <a href="javascript:;" class="commentbox">
                    <img class="mui-media-object mui-pull-left" :src="item.userphoto">
                    <div class="mui-media-body">
                        <div class="comment_title">
                            <span class="username">{{item.name}}</span>
                            <span class="commentop">
                                <span class="mui-icon mui-icon-extra mui-icon-extra-like"></span>{{item.top}}</span>
                        </div>
                        <div class="comment-content">{{item.content}}</div>
                        <p class='mui-ellipsis'>
                            <span>#{{i+1}}楼</span>
                            <span>北京海淀区</span>
                            <span>{{ item.date | dateFormat }}</span>
                        </p>
                    </div>
                </a>
            </li>
        </ul>
        <mt-button type="primary" size="large" @click="getmore" plain>加载更多</mt-button>
    </div>
</template>

<script>
    import {
        Toast
    } from 'mint-ui';

    export default {
        data() {
            return {
                pageSize: 1,
                //用户输入的评论
                userinput: '',
                is_disabled: false,
                //评论列表
                comments: [{
                        id: '123',
                        name: '征战之人',
                        date: '2018-1-29 20:27:56',
                        userphoto: 'http://f.hiphotos.baidu.com/image/pic/item/63d0f703918fa0ece5f167da2a9759ee3d6ddb37.jpg',
                        top: 12255,
                        content: '如果不进口美国的果子我现在七毛钱一斤的桃子到时候估计可以卖到五块'
                    },
                    {
                        id: '123',
                        name: '我的草原王子',
                        date: '2018-1-29 10:27:50',
                        userphoto: 'https://static.youku.com/user/img/avatar/50/24.jpg',
                        top: 12255,
                        content: '现在才知道我们吃到的开心果是美国产的。难怪每次吃了都开心不起来！'
                    },
                    {
                        id: '123',
                        name: '快乐的风',
                        date: '2018-1-29 08:27:56',
                        userphoto: 'http://q2.qlogo.cn/g?b=qq&k=6MDNzTQAX3biakjARE0EVqQ&s=40&t=1532793600',
                        top: 12255,
                        content: '现在我国市场上绝大多数开心果都是美国的，只要加征百分之二十五的关税，美国的开心果就得烂家里'
                    },
                    {
                        id: '123',
                        name: '葱头',
                        date: '2018-2-29 11:27:56',
                        userphoto: 'http://q1.qlogo.cn/g?b=qq&k=b4Yu3Vnh7E4oswhicgaJCQQ&s=40&t=1532793600',
                        top: 12255,
                        content: '转基因农产品不要也好，农副产品中国国内多了去'
                    },
                    {
                        id: '123',
                        name: '燕山液化气 ',
                        date: '2018-3-29 23:27:56',
                        userphoto: 'http://q2.qlogo.cn/g?b=qq&k=2RyMzKWoE4ibIpcB1Cvs2Hg&s=40&t=1532793600',
                        top: 12255,
                        content: '特朗普的票仓在钢铁石油军工和农业。高科技产品反而是支持民主党的。'
                    },
                    {
                        id: '123',
                        name: '意本铮境',
                        date: '2018-4-29 20:27:56',
                        userphoto: 'http://thirdwx.qlogo.cn/mmopen/vi_32/BofYvvJoFEN4xxA18TkSoCF86ibjibic7RppGtX56YrkYb4UybSKcaSqQWRTL7q2LldP3zyFGBbdkV0Ulic1CLAT9Q/132',
                        top: 12255,
                        content: '当年美国“大杏仁”的大字，不是随便印的，不是大小的大。心虚的表现，擦边球！忽悠国人多少年！'
                    },
                    {
                        id: '123',
                        name: '远方的蓝天 ',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://thirdwx.qlogo.cn/mmopen/vi_32/1LicJkQNo7ic24rLafJjgyYW0xxm7mlzYxarlvicRxtMwhicibOF0aXVSS9TlhMfL4aeCQflia9XNLwcmOq8suuyeEdg/132',
                        top: 12255,
                        content: '美国的不要，澳大利亚的也不能要。二个都是白眼狼。'
                    },
                    {
                        id: '123',
                        name: '我爱我的小家 ',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://q1.qlogo.cn/g?b=qq&k=FOMXrBV3vvbicLA4qQibs6PQ&s=40&t=1532793600',
                        top: 12255,
                        content: '农产品只要供大於求，掉价比跳楼更快，特朗普一个商人是无法体谅农民之苦的！'
                    },
                    {
                        id: '123',
                        name: '枫林听风',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKzb6yJNicKMqV5G3V7nSPZfMl2mtiaibfnwKrU8S3tQjHWvAguObx22zy2L9BVemHuaXlYqJO3HhLJw/132',
                        top: 12255,
                        content: '麻烦把你手机和电脑也砸了吧，里面大部分也是美国的'
                    },
                    {
                        id: '123',
                        name: '特朗普',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJOOs5KFwBFHCbKVDFWLeeu3WHGX79DiarQJNhaNPSv0lXuaIfWvTNiaZ40sXBDIxy8uza4hR27Qdiaw/132',
                        top: 12255,
                        content: '牵一发而动全身，贸易战没有强大的消费市场你是打不赢，中国一天的消费量可能要抵好多个国家一天的总和了。'
                    },
                    {
                        id: '123',
                        name: '岑斌魁',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://q1.qlogo.cn/g?b=qq&k=kHk03VLxWjySZEnvSLiaBIQ&s=40&t=1532793600',
                        top: 12255,
                        content: '狗日地美国姥在中国有钱赚就非常非常重要！在中国没有油水捞的时候就时时刻刻为难中国！这像话吗？美国姥有一个脑残的神经病总统特朗普真地是全世界地悲哀'
                    },
                    {
                        id: '123',
                        name: '信誉之首',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83ep3biao8GyDem7Mq9vA0EZicr83ZnicfqqsBJ0rI9a2Pn3A33AicezD79jOVEF8F6nmg2Kciar14F0Z0aw/132',
                        top: 12255,
                        content: '是不是每年春节期间吃的那种桃骨头，难吃的要死'
                    },
                    {
                        id: '123',
                        name: '光辉岁月',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJAJmuHAVVeKVtJZib08bj0MIFcIYK7sSgzjhELF0pTngvxsDLSSdsIYzqP5at8Oz8ByBKkao2pJBA/132',
                        top: 12255,
                        content: '现在咋不标榜自由贸易了！！！民间贸易你情我愿，互为补充。不知美国政府为啥这样抽风发神经！'
                    },
                    {
                        id: '123',
                        name: '腾讯网友',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://q1.qlogo.cn/g?b=qq&k=AFtXAHYa2BTBrcUcT5rL6Q&s=40&t=1532793600',
                        top: 12255,
                        content: '以前我每年买美国桃仁和这个果仁几百元，现在，贴钱给我也不买了……'
                    },
                    {
                        id: '123',
                        name: '文艺范-song',
                        date: '2018-5-29 20:27:56',
                        userphoto: 'http://q2.qlogo.cn/g?b=qq&k=TP01cG3GPvYzhXNRuTjMLA&s=40&t=1532793600',
                        top: 12255,
                        content: '我只买国产货、同时也希望国货质量、品质更上一个台阶'
                    }
                ],
                //测试用
                templist: []
            }
        },
        created() {
            this.getCommentsList();
        },
        methods: {
            getCommentsList() {
                //this.comments = res.body.message;
                //console.info('newsId:'+ this.id);

                let instance = Toast({
                    message: '正在加载数据...',
                    iconClass: 'mui-spinner',
                    duration: -1
                });

                setTimeout(() => {
                    this.templist = this.templist.concat(this.comments);
                    instance.close();
                }, 1000);
            },
            getmore() {
                this.pageSize++;
                this.getCommentsList();
            },
            //发表评论
            postComment() {

                //设置emulateJSON:true 相当于添加了 application/x-www-form-urlencoded，也可以全局设置
                // this.$http.post("api/postComment/"+ this.$route.params.id,{ content : this.userinput },{emulateJSON:true}
                // ).then(res => {

                // })

                if (this.userinput == '') {
                    Toast({
                        message: '请输入内容'
                    });
                    return;
                }

                this.is_disabled = true;
                let instance = Toast({
                    message: '正在提交...',
                    iconClass: 'mui-spinner',
                    duration: -1
                });

                setTimeout(() => {

                    var list = [{
                        id: '123',
                        name: '匿名用户 ',
                        date: new Date(),
                        userphoto: 'http://q2.qlogo.cn/g?b=qq&k=2RyMzKWoE4ibIpcB1Cvs2Hg&s=40&t=1532793600',
                        top: 12255,
                        content: this.userinput
                    }];
                    //this.templist = this.templist .concat();
                    this.templist = list.concat(this.templist);

                    this.userinput = '';
                    instance.close();
                    Toast({
                        message: '提交成功'
                    });
                    this.is_disabled = false;
                }, 1000);

            }
        },
        // 定义一个参数
        props: ['id']
    }
</script>


<style lang="scss" scoped>
    .comment-container {
        .publishbox {
            margin-bottom: 20px;
        }
        .commentbox {
            img {
                border-radius: 50%;
            }
            .comment_title {
                display: flex;
                justify-content: space-between
            }
            .comment-content {
                max-height: 66px;
                line-height: 1.3;
                word-wrap: break-word;
                overflow: hidden;
                white-space: normal;
                text-overflow: ellipsis;
                color: #111;
            }
            .commentop {
                font-size: 12px;
                color: #666;
            }
            .username {
                font-size: 14px;
                font-weight: bold
            }
            .mui-icon {
                font-size: 16px;
                padding-right: 5px;
            }
        }
        textarea {
            font-size: 14px;
            padding: 10px;
            margin: 10px 0;
        }
    }
</style>